﻿<template>
  <!--  库位视图 -->
  <div class="wms-warehouse-location-view-page">
    <a-spin :spinning="loading">
      <div class="top-blcok">
        <search-form ref="search" :loading.sync="loading" @search="onSearch" />
      </div>
      <div class="containter-blcok">
        <div class="example-tags">
          <div class="tag">空闲({{countNum.empty}})</div>
          <div class="tag orange-tag">待入({{countNum.daiRu}})</div>
          <div class="tag purple-tag">待出({{countNum.daiChu}})</div>
          <div class="tag primary-tag">存货({{countNum.fill}})</div>
          <div class="tag green-tag">空托({{countNum.kongtuo}})</div>
          <div class="tag red-tag">锁定({{countNum.lock}})</div>
        </div>
        <!-- 库区显示区域 start -->
        <div class="locations-box">
          
          <div class="location-items-group-block" v-for="(item1,index1) in list" :key="'location-block-'+index1">
            <div class="block-title">第{{item1.aisle}}巷道</div>
            
            <div class="location-items-group">
              <div class="location-items-row" v-for="(item2,index2) in (item1.wareLocationRownoData || [])" :key="'location-row-'+index2">
                
                <div class="location-items-layer" v-for="(item3,index3) in (item2.wareLocationLayerData || [])" :key="'location-layer-'+index3">
                  <div class="divider"></div>
                  <div class="location-item" v-for="(item4,index4) in (item3.wareLocationColumnNoData || [])" :key="'location-item-'+index4" 
                  :class="[handleClass(item4)]"
                  @click="openDetail(item4)">
                    {{item4?item4.placeCode:''}}
                  </div>
                  <div class="divider-zero"></div>
                </div>
              </div>
            </div>
            
          </div>
          
        </div>
        <!-- 库区显示区域 end -->
      </div>
      <detail-drawer :visible.sync="detailVisible" :row="detailRow" @callback="lockCallback" />
    </a-spin>
  </div>
</template>

<script>
  import SearchForm from './SearchForm.vue'
  import DetailDrawer from './DetailDrawer.vue'
  import {
    GetPalceList
  } from '@/api/modular/main/LocationViewManage'
import ItemVue from '@/components/AvatarList/Item.vue'
  export default {
    name: 'wmsWarehouseLocationViewPage',
    components: {
      SearchForm,
      DetailDrawer
    },
    data() {
      return {
        detailVisible: false,
        detailRow: {},
        loading: false,
        countNum: {
          empty: 0,
          daiRu: 0,
          daiChu: 0,
          fill: 0,
          kongtuo:0,
          lock: 0
        },
        list: [],
        searchForm: {}
      }
    },
    methods: {
      handleClass(item4) {
        let className = ''
        if (item4) {
          if (item4.islock) {
            className = 'red-item'
          } else if (item4.placeStatus === 3) {
            if(item4.emptyContainer === 1){
              className = 'green-item'
            }else{
              className = 'primary-item'
            }
          } else if (item4.placeStatus === 2) {
            className = 'orange-item'
          } else if (item4.placeStatus === 4) {
            className = 'purple-item'
          }
        } else {
          className = 'died-item'
        }
        return className
      },

      openDetail(obj) {
        if (!obj) return false
        this.detailRow = obj
        this.detailVisible = true;
      },
      getList(params, callback) {
        GetPalceList(params).then((d) => {
          if (d.data) {
            this.countNum = {
              empty: d.data.emptyNum || 0,
              daiRu: d.data.daiRuNum || 0,
              daiChu: d.data.daichuNum || 0,
              fill: d.data.materialNum || 0,
              kongtuo: d.data.emptyContainerNum || 0,
              lock: d.data.lockNum || 0
            }
            this.list = d.data.palceDetails || []
          } else {
            this.countNum = {
              empty: 0,
              daiRu: 0,
              daiChu: 0,
              fill: 0,
              kongtuo:0,
              lock: 0
            }
            this.list = []
          }
          callback && callback(true)
        }).catch(() => {
          callback && callback(false)
        })
      },
      onSearch(valObj) {
        this.loading = true
        this.searchForm = valObj
        this.getList(valObj, () => {
          this.loading = false
        })
      },
      lockCallback() {
        this.loading = true
        this.getList(this.searchForm, () => {
          this.loading = false
        })
      },
      init() {
        this.loading = true
        this.$refs.search.init((f, valObj) => {
          this.loading = false
          if (f) {
            this.searchForm = valObj
            this.getList(valObj, () => {
              this.loading = false
            })
          } else {
            this.loading = false
          }
        })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style lang="less" scoped>
  .wms-warehouse-location-view-page {
    overflow: hidden;
    display: flex;
    overflow: auto;
    background-color: #fff;
    border-radius: 10px;
    flex-direction: column;
    height: 100%;

    .top-blcok {
      flex-shrink: 0;
      padding: 10px 16px 16px 16px;
    }

    .containter-blcok {
      flex-grow: 1;
      height: 1px;
      display: flex;
      flex-direction: column;
      @gray-color: #808080;
      @danger-color: #ff3333;
      @primary-color: #ccffff;
      @orange-color: #ffa500;
      @purple-color: #800080;
      @green-color: #2cb228;
      @border-color-x: #c0c0c0;

      .example-tags {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 16px 16px 16px;

        .tag {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          width: 100px;
          border: 1px solid @border-color-x;
          border-radius: 4px;
          cursor: default;
          background-color: @gray-color;

          &+.tag {
            margin-left: 10px;
          }

          &.red-tag {
            background-color: @danger-color;
          }

          &.primary-tag {
            background-color: @primary-color;
          }

          &.orange-tag {
            background-color: @orange-color;
          }

          &.purple-tag {
            background-color: @purple-color;
          }
          &.green-tag {
            background-color: @green-color;
          }
          &:not(.primary-tag) {
            color: #FFFFFF;
          }
        }
      }

      .locations-box {
        flex-grow: 1;
        height: 1px;
        overflow: auto;

        .location-items-group-block {
          padding: 0 16px;
          margin-bottom: 16px;
          .block-title {
            padding-bottom: 4px;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }

        .location-items-group {
          @padding-size:8px;

          .location-items-row {
            margin-bottom: 16px;
            background-color: #f0f8ff;
            overflow: auto;
            padding: @padding-size 0;
            display: flex;
            flex-direction: column;
            
            .location-items-layer{
              flex-shrink: 0;
              display: flex;
              margin-bottom: @padding-size;
              .divider{
                width:@padding-size;
                flex-shrink: 0;
              }
              .divider-zero{
                width:1px;
                flex-shrink: 0;
              }
              .location-item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 120px;
                height: 50px;
                overflow: hidden;
                white-space: nowrap;
                margin-right: @padding-size;
                border: 1px solid @border-color-x;
                border-radius: 4px;
                cursor: pointer;
                flex-shrink: 0;
                background-color: @gray-color;
              
                &.active {
                  box-shadow: 0 0 4px #00ff00;
                }
                
                &.died-item {
                  background-color: #FFFFFF;
                  background-image: linear-gradient(
                  	to top right,
                  	rgba(192, 192, 192, 0) 0%,
                  	rgba(192, 192, 192, 0) calc(50% - 1px),
                  	rgba(192, 192, 192, 1) 50%,
                  	rgba(192, 192, 192, 0) calc(50% + 1px),
                  	rgba(192, 192, 192, 0) 100%
                  ), linear-gradient(
                  	to bottom right,
                  	rgba(192, 192, 192, 0) 0%,
                  	rgba(192, 192, 192, 0) calc(50% - 1px),
                  	rgba(192, 192, 192, 1) 50%,
                  	rgba(192, 192, 192, 0) calc(50% + 1px),
                  	rgba(192, 192, 192, 0) 100%
                  );
                  cursor: not-allowed;
                }
                
                &.red-item {
                  background-color: @danger-color;
                }
                &.green-item {
                  background-color: @green-color;
                }
                
                &.primary-item {
                  background-color: @primary-color;
                }
                
                &.orange-item {
                  background-color: @orange-color;
                }
                
                &.purple-item {
                  background-color: @purple-color;
                }
                
                &:not(.primary-item,.died-item) {
                  color: #FFFFFF;
                }
                
              }
            
              &:last-child {
                margin-bottom: 0;
              }
            }

            &:last-child {
              margin-bottom: 0;
            }

            
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .wms-warehouse-location-view-page {

    .ant-spin-nested-loading,
    .ant-spin-container {
      height: 100%;
    }

    .ant-spin-container {
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
  }
</style>